<template>
<div>
	<div class="banner" @click='handleBannerClick'>
		<img class="banner-img"
			:src="bannerImg" alt="" />
		<div class="banner-info">
			<div class="banner-title">{{sightName}}</div>
			<div class="banner-number">
				<span class="iconfont banner-icon">&#xe6dd;</span>
				<span>39</span>
			</div>
		</div>
	</div>
	<fade-animation>
		<common-gallary 
		:imgs='gallaryImgs' 
		v-show='showGallary'
		@close = 'handleGallaryClose'
		></common-gallary>
	</fade-animation>
	
</div>
</template>

<script>
	import CommonGallary from 'common/gallary/Gallary'
	import FadeAnimation from 'common/fade/FadeAnimation'
	export default {
		name :'DetailBanner',
		props:{
			sightName:String,
			bannerImg:String,
			gallaryImgs:Array
		},
		data(){
			return {
				showGallary:false
			}
		},
		components:{
			CommonGallary,
			FadeAnimation
		},
		methods:{
			handleBannerClick(){
				console.log('handlebannerClick')
				this.showGallary = true
			},
			handleGallaryClose(){
				this.showGallary = false
			}
		}
	}
</script>

<style>
	.banner {
		position: relative;
		/*防止页面抖动*/
		overflow: hidden;
		
		height: 0;
		padding-bottom: 55%;
		/*background: red;*/
		
	}
	.banner-img{
			width: 100%;
	}
	.banner-info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: .6rem;
			line-height: .6rem;
			display: flex;
			/*background: gray;*/
			/*底部渐变色实现*/
			background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
	}
	.banner-info .banner-title {
		flex: 1;
		font-size: .28rem;
		padding:0  .2rem;
		color: white;
	}
	.banner-info .banner-number {
		height: .32rem;
		line-height: .32rem;
		padding: 0 .4rem;
		margin-top: .14rem;
		border-radius: .2rem;
		background: rgba(0,0,0, .8);
		font-size: .24rem;
		color: white;
		text-align: center;
	}
	.banner-info .banner-number span {
		
		line-height: .32rem;
		font-size: .24rem;
		margin-top: .14rem;
	}
	 .banner-number.back-icon {
		font-size: .24rem;
	}
	
</style>